<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8"/>
    <title>zlt</title>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/oauth.js}"></script>
</head>
<body>
<div>
    专门测试sso入口的，测试OAuth2授权时可忽略：
    <hr>
    <p><input id="sso-order" type="button" value="访问sso-order" onclick="toSso('http://www.order.com:9000/test')"/></p>
    <p><input id="sso-storage" type="button" value="访问sso-storage" onclick="toSso('http://www.storage.com:9002/test')"/></p>
    <hr>
    <p>账户：<span id="account"></span></p>
    <p>权限：[<span id="roles"></span>]</p>
    <p>应用id：<span id="clientId"></span></p>
    <p>access_token：<span id="accessToken" style="width: 300px"></span></p>
    <p>refresh_token：<span id="refreshToken"></span></p>
    <p>state：<span id="state"></span></p>
    <p><input id="login" type="button" value="授权登录" onclick="login()"/></p>
    <p><input id="logout" type="button" value="退出登录" onclick="logout()"/></p>
    <p><input id="getRS" type="button" value="获取远程资源服务器信息" onclick="getRSInfo()"/></p>
    <textarea id="remoteApiResult" cols="200" rows="10"></textarea>
</div>
<script>
    let accessToken = localStorage.getItem('access_token');
    if (accessToken) {//已登录
        let refreshToken = localStorage.getItem('refresh_token');
        let account = localStorage.getItem('account');
        let roles = localStorage.getItem("roles");
        let state = localStorage.getItem("state");
        $('#accessToken').html(accessToken);
        $('#refreshToken').html(refreshToken);
        $('#account').html(account);
        $('#roles').html(roles);
        $('#clientId').html(clientId);
        $('#state').html(state);
        $("#logout").show();
        $("#getRS").show();
        // $("#login").hide();
    } else {//未登录
        $("#logout").hide();
        $("#getRS").hide();
        // $("#login").show();
    }

    function login() {
        let state = getState();
        localStorage.setItem("visitUri", window.location.href);
        localStorage.setItem("state", state);
        redirectOAuthLogin(state);
    }

    function logout() {
        let accessToken = localStorage.getItem('access_token');
        localStorage.removeItem('access_token');
        localStorage.removeItem('account');
        localStorage.removeItem('refresh_token');
        localStorage.removeItem("roles");
        /**
         * 解释一下为何退出是调的AS的退出，且必须是由前端发起：
         *  1. 因为当前的服务我没有写登录的逻辑，只有授权服务器登录的逻辑，如果当前系统也有退出，这是需要调2个退出接口的，一个本地服务的，一个OAuth2 AS的
         *  2. 因为浏览器的部分缓存是存在前端，后台代替前端，只能清除redis的缓存，无法做到浏览器的登录状态数据清空，所以谁在哪儿登录的，还必须得在哪儿退出
         * 解释一下这个redirect_uri为何是这个样子
         * 第一段： 由于是授权登录的，所以此处务必要调AS的退出接口---http://127.0.0.1:10000/oauth-server/logout
         * 第二段： 本身AS的退出/logout是不需要任何参数的，但是下面的2个参数是专门为了AS在处理退出时，触发退出事件handler接口MyLogoutHandler操作，必须要用的参数
         *  1. 参数redirect_uri，处理退出之后的页面跳转
         *  2. 参数accessToken, 处理OAuth2.0在redisTokenStore中的缓存
         */
        console.log("退出重定向地址:" + thirdAppBackPath)
        //调一下授权服务中心的授权
        window.location = uaaUri + "logout?" +
            "redirect_uri=" + thirdAppBackPath +
            "&accessToken=" + accessToken;
    }

    function getRSInfo() {
        //获取token和用户信息
        $.ajax({
            type: "get",
            url: thirdAppBackPath + 'resource/get?accessToken=' + accessToken,
            success: function (result) {
                if (result.status != 200) {
                    $("#remoteApiResult").html(result.message);
                    return;
                }
                $("#remoteApiResult").html(result.data);
            }
        });
    }

    // 访问sso-order服务
    function toSso(url) {
        window.open(url)
    }
</script>
</body>
</html>
